<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--
    一个form标签对应一个表单区域
    action:当表单提交之后,会将表单的数据传输到哪里
        简答来讲,就是表单提交之后跳转到哪
        类似于超链接的href属性,属性值是一个URL地址
    method:指定表单的提交方式,提交方式存在许多种
        但是表单只支持两种提交方式:get/post,默认值为get
    enctype:表单数据的传输方式,其值有三种
         application/x-www-form-urlencoded:默认值,使用正常数据进行传输,以字符串的方式传输
         multipart/form-data:以二进制流的方式进行传输,一般用于文件上传,此时的请求提交方式必须是post
         text/plain:普通文本

    post
        请求参数不会在地址栏展现
        安全性较高
        可以实现文件上传
        传输的数据大小理论上无限制,根据标准一般不超过80KB,开发中对于数据基本不可能达到80KB
        执行效率较低
    get
        请求参数会在地址栏展示
        安全性较低
        不能实现文件上传
        传输的数据大小有限制,一般不超过2KB
        执行效率较高

    在表单元素中,存在多种表单元素
    大部分表单元素都是通过input标签实现的,根据input标签的type属性不同,生成不同的表单元素
    type属性值:
        text:单行文本框
        password:密码框
        radio:单选框
            checked:默认选中指定选项
        checkbox:多选框
        file:文件选择器
            可以通过accept属性限制选择的文件类型
            文本
                text/plain
                text/html
                text/css
                text/*
            图片
                image/jpeg
                image/png
                image/gif
                image/*
        hidden:隐藏域,在页面中不展示,但是表单提交时会提交对应数据
        submit:提交按钮,点击之后表单提交
        reset:重置按钮,点击之后表单恢复到原始状态
        button:普通按钮,点击之后毫无反应
        image:图片按钮,使用一张图片代替提交按钮,其效果与submit一致
    对于单选框与多选框,可以通过name属性将多个元素分为同一组
    name相同的元素属于同一组,同一组的单选框只能选择一个,返回一个值
    同一组的多选框可以选择多个,返回字符串数组,数组中的每一个元素即为对应选项的值
    对于单选框与多选框,一般会通过value属性设置服务器值
    所谓的服务器值,表示当表单提交时传输的值,传输时传输的是选中的选项的value属性值
    对于其他元素,value属性值表示设置默认值,表单中默认展示value属性的值
    readonly:只读,设置当前元素只能看不能写
    disabled:设置当前元素属于失效元素,当前元素无法编辑,且表单提交时不参与数据传输
    placeholder:提示文字,在表单元素中展示一个提示文字,当表单元素没有内容时展示,有内容时消失
    required:当前元素是否必填
-->
<form action="" method="get" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="id" value="1">
    用户名:<input type="text" name="username" readonly placeholder="请输入用户名"><br>
    文本框:<input type="text" name="t" required><br>
    密码:<input type="password" name="password" value="123" disabled><br>
    性别:
    <input type="radio" name="gender" value="man" checked>男
    <input type="radio" name="gender" value="woman">女<br>
    兴趣:
    <input type="checkbox" name="hobbies" value="eat" checked>吃饭
    <input type="checkbox" name="hobbies" value="sleep" checked>睡觉
    <input type="checkbox" name="hobbies" value="beat">打豆豆<br>
    文件:<input type="file" accept="image/gif"><br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="普通">
    <input type="image" src="../images/submit.gif">
</form>
</body>
</html>